<template>
  <div class="jueshe">
    <div class="jueshe_head">
      <!-- 状态 -->
      <div class="zhuangtai">
        <div class="zt">状态</div>
        <template>
          <el-select class="ztai" v-model="status1" placeholder="选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
      </div>
      <!-- 编号 -->
      <div class="bianhao">
        <div class="zt">编号</div>
        <template>
          <el-input
            class="bh"
            placeholder="请输入角色编号"
            v-model="role1"
            clearable
          ></el-input>
        </template>
      </div>
      <!-- 角色名称 -->
      <div class="bianhao">
        <div class="zt">名称</div>
        <template>
          <el-input
            class="bh"
            placeholder="请输入角色名称"
            v-model="name1"
            clearable
          ></el-input>
          <el-button class="serchbox" type="primary" icon="el-icon-search" @click="search"
            >搜索</el-button
          >
        </template>
      </div>
      <!-- 按钮 -->
      <div class="anniu_box">
        <!-- 添加 -->
        <div class="add-box">
          <el-button
            class="abox"
            type="primary"
            @click="centerDialogVisible = true"
            icon="el-icon-plus"
            >添加</el-button
          >
        </div>

        <!-- 授权 -->
        <!-- <div class="add-box"> -->
          <!-- <el-button class="abox" @click="souquan = true" type="primary" icon="el-icon-postcard" -->
            <!-- >授权</el-button -->
          <!-- > -->
        <!-- </div> -->
        <!-- 操作 -->
        <div class="add-box">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link"
              >操作<i class="el-icon-arrow-down el-icon--right"></i
            ></span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="状态正常">正常</el-dropdown-item>
              <el-dropdown-item command="状态冻结">冻结</el-dropdown-item>
              <el-dropdown-item command="状态删除">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>

    <!-- 表格主体 -->
    <div class="jueshe_content">
      <el-table
        ref="multipleTable"
        border
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="80"> </el-table-column>
        <el-table-column label="角色编号" width="250" align="center">
          <template slot-scope="scope">{{ scope.row.role }}</template>
        </el-table-column>
        <el-table-column label="角色名称" width="250" align="center">
          <template slot-scope="scope">{{ scope.row.rolename }}</template>
        </el-table-column>
        <el-table-column label="创建时间" width="280" align="center">
          <template slot-scope="scope">{{ scope.row.create_date }}</template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!--  v-if="scope.row.role_status !== 3" -->
            <el-button
              @click="bianji(scope.$index, scope.row), (Bianji = true)"
              type="text"
              size="small"
              >编辑</el-button
            >
            <el-button
              @click="xiangqing(scope.row), (xq = true)"
              type="text"
              size="small"
            >
              详情
            </el-button>
            <el-button
              @click="handleDelete(scope.$index, scope.row)"
              type="text"
              size="mini"
              >删除
              </el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="paging">
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 8, 10]"
          :page-size="currentSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <!--  每个页面的弹框都在最底部   -->

    <!--   头部按钮 里面的提交弹框  -->
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <el-form ref="addBox" label-width="100px">
        <el-form-item label="角色标识：">
          <el-input v-model="role" placeholder="请输入角色编号"></el-input>
        </el-form-item>
        <el-form-item label="角色名称：">
          <el-input v-model="rolename" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input
            type="textarea"
            autosize
            placeholder="请输入内容"
            v-model="remark"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="addData(), (centerDialogVisible = false)"
          >确 定</el-button
        >
      </span>
    </el-dialog>


    <!-- 编辑弹框 -->
    <el-dialog title="基本信息" :visible.sync="Bianji">
      <el-form
        :model="ruleEditForm"
        ref="ruleEditForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="角色编号" prop="role">
          <el-input
            v-model="ruleEditForm.role"
            placeholder="确认角色编号"
          ></el-input>
        </el-form-item>

        <el-form-item label="角色名称" prop="rolename">
          <el-input
            v-model="ruleEditForm.rolename"
            placeholder="请输入角色名称"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitEditForm('ruleEditForm')"
            >提交</el-button
          >
          <el-button @click="resetEditForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 详情弹框 -->
    <el-dialog title="详情信息" :visible.sync="xq" width="50%" center>
      <el-table :data="ruleEditForm2" style="width: 100%" border>
        <el-table-column prop="id" label="角色ID" width="85" align="center">
        </el-table-column>
        <el-table-column
          prop="create_date"
          label="创建时间"
          width="200"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="role"
          label="角色编号"
          width="210"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="rolename"
          label="角色名称"
          width="210"
          align="center"
        >
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="xq = false">取 消</el-button>
        <el-button type="primary" @click="xq = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 删除弹框 -->
    <el-dialog title="提示信息" :visible.sync="sc" width="20%">
      <span>你是确认删除信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="sc = false">取 消</el-button>
        <el-button type="primary" @click="sc = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>



<script>
export default {
  data() {
    return {
      id: 1,
      centerDialogVisible: false,
      Bianji: false,
      xq: false,
      sc: false,
      yhlist: false,
      ruleEditForm2: [],
      role1: "", //输入编号
      name1: "", //输入角色名称
      role: "", //添加 角色编号
      rolename: "", //添加角色名称
      remark: "",
      ruleEditForm: {
        role: "",
        create_date: "",
        rolename: "",
        id: "",
      },
      // 添加角色输入框数据
      addBox: {
        addBianhao: "",
        addMingcheng: "",
        addTextarea: "",
      },
      options: [
        {
          value: "",
          label: "请选择",
        },
        {
          value: 1,
          label: "正常",
        },
        {
          value: 2,
          label: "冻结",
        },
      ],
      dialogFormVisible: false,
      status1: "",
      currentPage: 1,
      currentSize: 10,
      total: 55,
      // 表格数据
      tableData: [],
    };
  },
  methods: {
    // 搜索 查询 角色编号 接口
    search() {
      console.log(this.status1, this.role1, this.name1);
      this.getTableData(this.status1, this.role1, this.name1);
    },
    // 添加 角色弹框 接口
    addData() {
      let date = new Date().getTime();
      date = this.getTimeFormat(date);
      this.$axios({
        url: "/system/admin/sys/rolemanagement/addRole",
        method: "POST",
        data: {
          create_date: date,
          role: this.role,
          rolename: this.rolename,
          remark: this.remark,
        },
      })
        .then((res) => {
          this.getTableData();
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 用户列表
    yhList(row) {
      console.log(row);
    },
    // 操作
    //  编辑
    submitEditForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            role: this.ruleEditForm.role,
            create_date: this.ruleEditForm.create_date,
            id: this.ruleEditForm.id,
            rolename: this.ruleEditForm.rolename,
            //  password:this.ruleEditForm.password ,
            // sysUser:{}
          };
          console.log(this.ruleAddForm);
          this.$axios({
            url: "/system/admin/sys/rolemanagement/modRoleById",
            method: "post",
            data: data,
          })
            .then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.Bianji = false;
                this.ruleEditForm = {
                  id: "",
                  create_date: "",
                  role: "",
                  //  sysUser: {},
                  rolename: "",
                };
              } else {
                this.$message.error("修改失败");
                this.dialogAddFormVisible = false;
              }
            })
            .catch((err) => {
              this.$message.error("修改失败");
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    bianji(index, row) {
      this.ruleEditForm = row;
      console.log(this.ruleEditForm);
    },
    // 编辑重置按钮
    resetEditForm() {
      this.ruleEditForm = {
        account: "",
        create_date: "",
        name: "",
        password: "",
        sysUser: {},
        checkPass: "",
      };
    },
    //  详情
    xiangqing(row) {
      this.ruleEditForm2 = [row];
      console.log(this.ruleEditForm2);
    },

    // 删除
    handleDelete(index, row) {
      //要改
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(index, row.id);
          this.$axios({
            url: "/system/admin/sys/rolemanagement/delRoleById",
            method: "post",
            data: {
              id: row.id,
              online_status: 3,
            },
          })
            .then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              } else {
                this.$message.error("删除失败！");
              }
              console.log(res);
              //res.splice(index, 1);
            })
            .catch((err) => {
              this.$message.error("删除失败！");
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 头部操作
    handleCommand(command) {
      this.$message("该角色：" + command);
    },
    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getTableData();
    },
    add0(m) {
      return m < 10 ? "0" + m : m;
    },
    getTimeFormat(date) {
      var time = new Date(date);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      return y + "-" + this.add0(m) + "-" + this.add0(d);
    },
    getTableData(status = "", role = "", name = "") {
      this.$axios({
        url: "/system/admin/sys/rolemanagement/findRoleInfo",
        method: "POST",
        data: {
          currentPage: this.currentPage,
          pageSize: this.currentSize,
          role: role,
          role_status: status,
          rolename: name,
        },
      })
        .then((res) => {
          res.data.data.forEach((v) => {
            v.create_date = this.getTimeFormat(v.create_date);
          });
          this.total = res.data.count;
          this.tableData = res.data.data;
          console.log(this.tableData);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    //初始化 渲染页面表格主体
    this.getTableData();
  },
};
</script>

<style scoped>
.jueshe {
  background-color: #fff;
  padding: 10px 20px;
}
.jueshe_head {
  display: flex;
  padding: 10px 0;
}
.serchbox {
  margin-left: 10px;
}
.zhuangtai,
.bianhao {
  display: flex;
  height: 42px;
  margin-right: 10px;
}
.zt {
  height: 38px;
  border: 1px solid rgb(175, 175, 174);
  width: 60px;
  line-height: 40px;
  padding: 0 5px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: darkgray;
}
.zt:focus {
  border: none;
}
.ztai {
  width: 80px;
  height: 38px;
  border: none;
  border: 1px solid rgb(175, 175, 174);
  line-height: 40px;
  text-align: center;
}
/* .bh { */
  /* border: 1px solid rgb(175, 175, 174); */
/* } */
.anniu_box {
  margin-left: 250px;
  display: flex;
}
.abox {
  background-color: #409eff;
  color: #fff;
  margin-right: 5px;
  border-radius: 0;
  padding: 12px 20px;
}
.el-dropdown-link {
  display: block;
  text-align: center;
  width: 80px;
  height: 40px;
  line-height: 40px;
  margin-right: 5px;
  border-radius: 0;
  background-color: #409eff;
  color: #fff;
}
.paging {
  margin-top: 30px;
  margin-bottom: 15px;
}
</style>